<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>准考证列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 页面背景样式 */
        body {
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            height: 100vh;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 容器样式 */
        .container {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 1000px;
            max-height: 70vh;
            overflow-y: auto;
        }

        /* 分页按钮样式 */
        .pagination {
            display: flex;
            justify-content: center;
            flex-wrap: nowrap;
        }

        .page-item {
            margin: 0 5px;
        }

        .page-link {
            display: block;
            padding: 10px 15px;
            text-align: center;
        }

        .page-item.active .page-link {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }

        h2 {
            text-align: center;
            color: #007bff;
        }

        /* 查询输入框和按钮样式 */
        .query-section {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 10px;
        }

        .query-section input {
            width: 200px;
        }

        /* 跳转页输入框样式 */
        .jump-to-page, .status-filter {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }

        .jump-to-page input, .status-filter select {
            width: 60px;
            margin-right: 10px;
        }
    </style>
</head>
<body>

<div class="container mt-4">
    <h2>用户列表</h2>

    <!-- 查询输入框和按钮 -->
    <div class="query-section">
        <div>
            <input type="text" id="searchIDInput" class="form-control" placeholder="请输入ID进行查询">
            <button class="btn btn-primary mt-2" id="searchIDBtn">按ID查询</button>
        </div>
        <div>
            <input type="text" id="searchQQInput" class="form-control" placeholder="请输入QQ进行查询">
            <button class="btn btn-primary mt-2" id="searchQQBtn">按QQ查询</button>
        </div>
    </div>

    <!-- 状态查询下拉菜单 -->
    <div class="status-filter mb-4">
        <select id="statusFilter" class="form-control">
            <option value="">选择状态查询</option>
            <option value="true">正常</option>
            <option value="false">异常</option>
        </select>
        <button class="btn btn-secondary" id="searchStatusBtn">按状态查询</button>
    </div>

    <!-- 用户列表表格 -->
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>ID</th>
            <th>本科</th>
            <th>报考专业</th>
            <th>QQ</th>
            <th>准考证</th>
            <th>时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="userTableBody">
        </tbody>
    </table>

    <!-- 分页按钮 -->
    <nav>
        <ul class="pagination justify-content-center" id="paginationButtons">
            <li class="page-item">
                <button class="page-link" id="prevPage">上一页</button>
            </li>
            <li class="page-item">
                <span class="page-link" id="currentPage">1</span>
            </li>
            <li class="page-item">
                <button class="page-link" id="nextPage">下一页</button>
            </li>
        </ul>
    </nav>

    <!-- 跳转到指定页 -->
    <div class="jump-to-page">
        <input type="number" id="jumpToPageInput" min="1" class="form-control" placeholder="页码">
        <button class="btn btn-secondary" id="jumpToPageBtn">跳转</button>
    </div>

    <div class="text-center mt-3">
        <span id="totalPages">总页数: 1</span>
    </div>
</div>

<!-- 模态框用于显示准考证大图 -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalLabel">准考证图片</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <img id="modalImage" src="" class="img-fluid" alt="准考证大图">
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 检测设备类型并切换背景
    function setBackgroundImage() {
        const isMobile = /Mobi|Android|iPhone/i.test(navigator.userAgent);
        document.body.style.backgroundImage = isMobile
            ? "url('/bg-mobile.jpg')"  // 手机端背景图片
            : "url('/bg-desktop.jpg')"; // 电脑端背景图片
    }

    setBackgroundImage();

    let currentPage = 1;
    const pageSize = 10;
    let currentQQ = null;
    let currentStatus = null;
    let currentID = null;

    function fetchUserData(page, id = currentID, qq = currentQQ, status = currentStatus) {
        currentPage = page;
        currentID = id;
        currentQQ = qq;
        currentStatus = status;

        let requestData = {
            page: page,
            size: pageSize
        };

        if (id) requestData.id = id;
        if (qq && !id) requestData.qq = qq;
        if (status !== null && !id) requestData.status = status;

        $.ajax({
            url: '/users/buzhunnicaidao/wsq/suijishu/19749302',
            type: 'GET',
            data: requestData,
            success: function (data) {
                renderUserTable(data.records);
                $("#currentPage").text(page);
                const totalPages = data.pages;
                $("#totalPages").text(`总页数: ${totalPages}`);
                $("#prevPage").prop("disabled", page <= 1);
                $("#nextPage").prop("disabled", page >= totalPages);
            },
            error: function () {
                alert("无法获取用户数据");
            }
        });
    }

    function renderUserTable(users) {
        const tbody = $("#userTableBody");
        tbody.empty();
        users.forEach(user => {
            tbody.append(
                `<tr>
                    <td>${user.id}</td>
                    <td>${user.university}</td>
                    <td>${user.subject}</td>
                    <td>${user.qq}</td>
                    <td><img src="${user.url}" alt="准考证" style="width: 100px; height: auto;" class="thumbnail"></td>
                    <td>${user.time}</td>
                    <td>${user.ok ? '正常' : '异常'}</td>
                    <td>
                        ${!user.ok ? `<button class="btn btn-success btn-sm certify-btn" data-id="${user.id}">认证</button>` : ''}
                        <button class="btn btn-danger btn-sm delete-btn" data-id="${user.id}">删除</button>
                    </td>
                </tr>`
            );
        });

        $(".certify-btn").on("click", function () {
            const userId = $(this).data("id");
            certifyUser(userId);
        });

        $(".delete-btn").on("click", function () {
            const userId = $(this).data("id");
            deleteUser(userId);
        });

        $(".thumbnail").on("click", function () {
            const imgSrc = $(this).attr("src");
            $("#modalImage").attr("src", imgSrc);
            $("#imageModal").modal("show");
        });
    }

    function certifyUser(userId) {
        $.ajax({
            url: '/access',
            type: 'POST',
            data: { userId: userId },
            success: function () {
                alert("认证成功");
                fetchUserData(currentPage);
            },
            error: function () {
                alert("认证失败");
            }
        });
    }

    function deleteUser(userId) {
        if (confirm("确定要删除该用户吗？")) {
            $.ajax({
                url: '/delete',
                type: 'POST',
                data: { userId: userId },
                success: function () {
                    alert("删除成功");
                    fetchUserData(currentPage);
                },
                error: function () {
                    alert("删除失败");
                }
            });
        }
    }

    $("#prevPage").on("click", function () {
        if (currentPage > 1) fetchUserData(currentPage - 1);
    });

    $("#nextPage").on("click", function () {
        fetchUserData(currentPage + 1);
    });

    $("#searchIDBtn").on("click", function () {
        const id = $("#searchIDInput").val();
        fetchUserData(1, id || null);
    });

    $("#searchQQBtn").on("click", function () {
        const qq = $("#searchQQInput").val();
        fetchUserData(1, null, qq || null, currentStatus);
    });

    $("#searchStatusBtn").on("click", function () {
        const status = $("#statusFilter").val();
        fetchUserData(1, null, currentQQ, status !== "" ? status === "true" : null);
    });

    $("#jumpToPageBtn").on("click", function () {
        const pageNumber = parseInt($("#jumpToPageInput").val());
        if (pageNumber && pageNumber > 0) fetchUserData(pageNumber);
        else alert("请输入有效的页码");
    });

    $(document).ready(function () {
        fetchUserData(currentPage);
    });
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
